<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>

  <body>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
        }
      }
    </script>


    <script type="module">
      import PolyGraph from "./PolyGraph.js";
      import { createApp, ref, reactive } from "vue";

      createApp({
        components: {
          PolyGraph,
        },
        setup() {
          const newLabel = ref("");
          const stats = reactive([
            { label: "A", value: 100 },
            { label: "B", value: 100 },
            { label: "C", value: 100 },
            { label: "D", value: 100 },
            { label: "E", value: 100 },
            { label: "F", value: 100 },
          ]);

          function add(e) {
            e.preventDefault();
            if (!newLabel.value.trim()){
              newLabel.value = "";
              return;
            }
            stats.push({
              label: newLabel.value,
              value: 100,
            });
            newLabel.value = "";
          }

          function remove(stat) {
            if (stats.length > 3) {
              stats.splice(stats.indexOf(stat), 1);
            } else {
              alert("Can't delete more!");
            }
          }

          return {
            newLabel,
            stats,
            add,
            remove,
          };
        },
      }).mount("#app");
    </script>

    <div id="app">
      <svg width="200" height="200">
        <poly-graph :stats="stats"></poly-graph>
      </svg>

      <!-- controls -->
      <div v-for="stat in stats">
        <label>{{stat.label}}</label>
        <input type="range" v-model="stat.value" min="0" max="100" />
        <span>{{stat.value}}</span>
        <button @click="remove(stat)" class="remove">X</button>
      </div>

      <form id="add">
        <input name="newlabel" v-model="newLabel" />
        <button @click="add">Add a Stat</button>
      </form>

      <pre id="raw">{{ stats }}</pre>
    </div>
  </body>
</html>
